<template>
  <div class="mapToolbar">
    <div class="xcgl-mapToolbar-btnGroup">
      <!-- 地图切换 -->
      <div class="mapToolbar-btn">
        <el-button icon="kfb-icon-quanqiu" @click="selectBaseMap" />
      </div>

      <!-- 搜索 -->
      <div class="mapToolbar-btn">
        <el-button icon="el-icon-search" @click="selectSearch" />
      </div>

      <!-- 测量 -->
      <div class="mapToolbar-btn">
        <el-button icon="kfb-icon-celiang3" @click="selectMeasure" />
      </div>

      <!-- 书签 -->
      <div class="mapToolbar-btn">
        <el-button icon="el-icon-paperclip" @click="selectBookMark" />
      </div>

      <!--双屏-->
      <div class="mapToolbar-btn">
        <el-button icon="kfb-icon-compared" @click="doubleScreenSwitch" />
      </div>
    </div>

     

    <!--底图选择-->
    <transition name="el-zoom-in-top">
      <div v-if="isVisible === 1" class="xcgl-common-panel layer-pop">
        <span class="angle-to-right" />
        <span class="xcgl-common-panel-title">选择底图</span>
        <i class="tab-pane-header-btn el-icon-close" @click="isVisible=0" />
        <el-divider />
        <div class="layer-items clearfix">
          <a
            v-for="item in baseMapGroup"
            :key="item._id"
            :class="item.checked ?'isChecked':''"
            @click="checkBaseGroup($event,item)"
          >
            <el-image
              :src="'./static/img/basemap/'+ item.name +'.jpg'"
              style="width: 78px; height: 58px"
              fit="fill"
            />
            {{ item.name }}
          </a>
        </div>
      </div>
    </transition>
    <!--搜索-->
    <transition name="el-zoom-in-top">
      <div v-if="isVisible===2" class="xcgl-common-panel layer-pop">
        <span class="angle-to-right" />
        <span class="xcgl-common-panel-title">地名搜索</span>
        <i class="tab-pane-header-btn el-icon-close" @click="isVisible=0" />
        <el-divider />
        <el-input
          ref="poi_input"
          v-model="placeName"
          placeholder="请输入地名地址或坐标"
          class="input-with-select"
          clearable
          @keyup.enter.native="poiSearch"
        >
          <el-button slot="append" icon="el-icon-search" @click="poiSearch" />
        </el-input>

        <ul class="infinite-list" style="overflow:auto">
          <li v-for="i in poiData" class="infinite-list-item" @click.stop="poiLocation($event,i)">
            {{ i.name }}
            <span class="el-icon-location poi-location" />
          </li>
        </ul>
        <el-pagination
          :hide-on-single-page="true"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next"
          @current-change="handleCurrentChange"
        />
      </div>
    </transition>
    <!--测量-->
    <transition name="el-zoom-in-top">
      <div v-if="isVisible === 3" class="xcgl-common-panel layer-pop">
        <span class="angle-to-right" />
        <span class="xcgl-common-panel-title">测量工具</span>
        <i class="tab-pane-header-btn el-icon-close" @click="isVisible=0" />
        <el-divider />
        <div style=" margin-top: 0px;" class="layer-arguments">
          <a class="kfb-icon-juli2" @click="measureLength">&nbsp;&nbsp;测距</a>
        </div>
        <div class="layer-arguments">
          <a class="kfb-icon-mianji" @click="measurePolygon">&nbsp;&nbsp;测面</a>
        </div>
        <div class="layer-arguments">
          <a class="kfb-icon-shanchu1" @click="measureClear">&nbsp;&nbsp;清除</a>
        </div>
      </div>
    </transition>
    <!--书签-->
    <transition name="el-zoom-in-top">
      <div v-if="isVisible === 4" class="bookmarkPanel xcgl-common-panel layer-pop">
        <span class="angle-to-right" />
        <span class="xcgl-common-panel-title">书签工具</span>
        <i class="tab-pane-header-btn el-icon-close" @click="isVisible=0" />
        <i class="tab-pane-header-btn-addBookmark kfb-icon-plus-outline" @click="addBookMark" />
        <el-divider />
        <span v-if="!hasData" style="position:relative;font-size: 10px;">没有数据</span>
        <div v-for="item in bookmarks" v-else="hasData" :key="item._id" class="layer-arguments">
          <a class="el-icon-location" />
          <span @click="locateTo(item)">&nbsp;{{ item.name }}&nbsp;&nbsp;&nbsp;</span>
          <a class="bookmarkDel kfb-icon-icon-test62" @click="handleDelete(item)" />
          <a class="bookmarkDel kfb-icon-bianji2" @click="handleEdit(item)" />
        </div>
      </div>
    </transition>
    <!--添加书签-->
    <el-dialog :visible.sync="dialogFormVisible" title="添加书签" width="400px" append-to-body>
      <el-form>
        <el-form-item label="书签名称" label-width="80px">
          <el-input
            ref="book_input"
            v-model="form.name"
            autocomplete="off"
            size="small"
            @keyup.enter.native="handleConfirm"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>

    <slot name="componentPanel" />
  </div>
</template>
<script>
import { mapState } from "vuex";
import { add, remove, update, list } from "@/api/bookmark";
import Clone from "@/utils/clone";
import { poiList, poiAddress } from "@/api/poi";

export default {
  name: "Index",
  data() {
    return {
      isVisible: 0,
      dialogFormVisible: false, // 对话框
      bookmarks: [], // 书签数据
      form: {}, // 书签表单
      isAdd: false,
      placeName: "",
      isloadComplete: undefined,
      currentPage: 1,
      pageSize: 50,
      total: 0,
      poiData: [],
      marker: undefined,
      markerLeft: undefined,
      markerRight: undefined,
      doubleScreen: undefined
    };
  },
  mounted() {
    this.mapService.on("map.init", this.mapInitComplete, this);
  },
  methods: {
    /**
     * 选择底图
     */
    selectBaseMap($event) {
      this.isVisible = this.isVisible === 1 ? 0 : 1;
    },

    /**
     * 选择搜索
     */
    selectSearch() {
      this.isVisible = this.isVisible === 2 ? 0 : 2;
      if (this.isVisible) {
        this.$nextTick(() => {
          this.$refs["poi_input"].focus();
        });
      }
    },

    /**
     * 选择测量
     */
    selectMeasure() {
      this.isVisible = this.isVisible === 3 ? 0 : 3;
    },

    /**
     * 选择书签
     */
    selectBookMark() {
      this.isVisible = this.isVisible === 4 ? 0 : 4;
      this.getBookMarks();
    },

    /**
     * 选择基础底图
     * @param $event
     * @param item
     */
    checkBaseGroup($event, item) {
      if (item.checked) {
        return;
      }
      this.mapService.addBaseLayer(item.layers);
      this.baseMapGroup.forEach(group => {
        this.$set(group, "checked", group._id === item._id);
      });
    },
    /**
     * map style初始化完成函数
     */
    mapInitComplete() {
      if (this.isloadComplete) {
        this.mapService.addBaseLayer(this.baseLayers);
      }
      this.isloadComplete = true;
    },
    /**
     * 测量长度
     */
    measureLength() {
      this.measureSync.setDrawAction(0);
    },
    /**
     * 测量面积
     */
    measurePolygon() {
      this.measureSync.setDrawAction(1);
    },
    /**
     * 清除测量
     */
    measureClear() {
      this.measureSync.clearMeasure();
    },
    /**
     * 添加书签
     */
    addBookMark() {

    },
    /**
     * 获取书签列表
     */
    getBookMarks() {
  
    },
    /**
     * 提交
     */
    handleConfirm() {

    },
    /**
     * 删除书签
     * @param item
     */
    handleDelete(item) {
     
    },
    /**
     * 编辑书签
     * @param item
     */
    handleEdit(item) {
      this.form = Clone.clone(item);
      this.dialogFormVisible = true;
      this.isAdd = false;
    },
    /**
     * 书签定位
     * @param item
     */
    locateTo(item) {
     
    },

    /**
     * 翻页
     * @param val
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.requestPoiData();
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.requestPoiData();
    },
    /**
     * 搜索按钮
     */
    poiSearch() {
     
    },
    /**
     * 请求数据
     */
    requestPoiData() {
      poiList({
        keyWord: this.placeName,
        pageIndex: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.total = res.data.tatol;
        this.poiData = res.data.data;
        if (this.total == 0) {
          this.$message({
            type: "info",
            message: "没有数据!"
          });
        }
      });
    },
    /**
     * poi定位
     * @param e
     * @param item
     */
    poiLocation(e, item) {
      poiAddress({ _id: item.id }).then(res => {

      });
    },
    /**
     * 双屏对比
     */
    doubleScreenSwitch() {
      this.doubleScreen = !this.doubleScreen;
      if (this.doubleScreen) {
        this.comparable.setMode(0);
      } else {
        this.comparable.setMode(2);
      }
      this.$emit("onDoubleScreenSwitch", this.doubleScreen);
    }
  },
  computed: {
    ...mapState({
      // 底图分组
      baseMapGroup(state) {
        return state.user.baseGroup;
      },
      /**
       *
       */
      baseLayers(state) {
        return state.user.baseLayers;
      },
      /**
       * 同步测量
       * @param state
       * @returns {measureSync|(function(*))|*}
       */
      measureSync(state) {
        return state.xcgl.measureSync;
      },
      /**
       * 同步测量
       * @param state
       * @returns {*}
       */
      mapService: function(state) {
        return state.xcgl.mapService;
      },
      /**
       * 比较
       * @param state
       * @returns {comparable|(function(*))|*}
       */
      comparable: function(state) {
        return state.xcgl.comparable;
      }
    }),
    // 书签是否有数据
    hasData() {
      return this.bookmarks.length > 0;
    }
  },
  watch: {
    isVisible: function(n, o) {
      if (n == 0 && o == 2) {
        // 关闭搜索
        // if (this.markerRight) {
        //   this.markerRight.remove();
        //   this.markerLeft.remove();
        // }
        // this.markerRight = undefined;
        // this.markerLeft = undefined;
        this.mapService.removeMarker();
      }
    }
  },
  beforeDestroy() {
    this.mapService.off("map.init", this.mapInitComplete);
    this.baseMapGroup.forEach((group, i) => {
      this.$set(group, "checked", i === 0);
    });
  }
};
</script>
<style>
.xcgl-mapToolbar-btnGroup {
  position: absolute;
  top: 190px;
  right: 10px;
  z-index: 999;
  cursor: pointer;
}

.xcgl-mapToolbar-btnGroup .el-button {
  border-radius: 0px;
  padding: 6px 6px;
  width: 32px;
  height: 32px;
}

.mapToolbar-btn {
  margin-top: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.xcgl-common-panel {
  position: absolute;
  right: 78px;
  top: 193px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  background: #fff;
  padding: 5px;
  z-index: 999;
  cursor: auto;
  min-width: 150px;
  /*border-radius: 10px;*/
}

.xcgl-common-panel .el-divider--horizontal {
  margin: 8px 0;
}

.xcgl-common-panel-title {
  font-size: 14px;
  font-weight: bold;
  line-height: 10px;
  color: #333;
  margin-top: 0;
  padding: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  /*border-bottom: 1px solid #eee;*/
}

.xcgl-common-panel .close {
  position: absolute;
  right: 7px;
  top: 9px;
}

.baseMapPanel h4 {
  margin: 10px 0px;
}

.measurePanel h4 {
  margin-top: 10px;
  margin-bottom: 7px;
}

.bookmarkPanel h4 {
  margin-top: 10px;
  margin-bottom: 7px;
}

.layer-items {
  margin: 10px;
}

.layer-items a {
  width: 72px;
  float: left;
  text-align: center;
  line-height: 20px;
  font-size: 11px;
  font-family: "Microsoft YaHei";
  margin: 0px 5px;
}

.layer-items .isChecked {
  color: #337fe5;
}

.layer-items .isChecked .el-image {
  border: #337fe5 2px solid;
}

.layer-arguments {
  margin-top: 4px;
  height: 23px;
  line-height: 23px;
  border-bottom: 1px solid #eee;
}

.layer-arguments a {
  font-size: 13px;
}

.layer-arguments a:hover {
  color: #337fe5;
  cursor: pointer;
}

.layer-arguments .el-icon-location {
  color: #337fe5;
}

.bookmarkPanel .layer-arguments {
  font-size: 13px;
}

.bookmarkPanel .layer-arguments a {
  font-size: 15px;
}

.bookmarkPanel .layer-arguments:hover {
  color: #337fe5;
  cursor: pointer;
}

.tab-pane-header-btn-addBookmark {
  position: absolute;
  left: -19px;
  margin: 10px;
  top: -20px;
  font-size: 16px;
  transition: transform 0.3s;
  background-color: #337fe5;
  border-radius: 10px;
  color: #fff;
  padding: 2px;
  z-index: 900;
  cursor: pointer;
}

.bookmarkDel {
  float: right;
  color: #f44336;
  font-size: 17px;
}

.el-input__inner {
  height: 30px;
  line-height: 30px;
  /* margin: 5px; */
}

.infinite-list {
  margin: 10px 0;
  padding: 10px;
  max-height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
  overflow-style: marquee-line;
}

.infinite-list-item {
  font-size: 12px;
  list-style-type: none;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  cursor: pointer;
}

.poi-location {
  float: right;
}

.el-input__inner {
  height: 30px;
  line-height: 30px;
  /* margin: 5px; */
}
</style>

